<div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
  <%= render 'shared/settings_nav' %>
  <div class="flex-grow max-w-xl mx-auto">
    <h1 class="text-4xl font-bold mb-4">Storage</h1>
    <% value = @encrypted_config.value || { 'service' => 'disk' } %>
    <% configs = value['configs'] || {} %>
    <%= form_for @encrypted_config, url: settings_storage_index_path, method: :post, html: { autocomplete: 'off', class: 'w-full' } do |f| %>
      <% options = [%w[Disk disk], %w[AWS aws_s3], %w[GCP google], %w[Azure azure]] %>
      <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="block relative">
        <ul class="items-center w-full text-sm font-medium text-gray-900 space-y-2 sm:space-y-0 sm:flex sm:space-x-2">
          <% options.each do |(label, val)| %>
            <li class="w-full text-sm font-medium flex items-center relative group py-3.5">
              <%= f.radio_button :selected, val, checked: value['service'] == val, id: "#{val}_radio", data: { action: 'change:toggle-visible#trigger' }, class: 'base-radio ml-3 relative peer z-10' %>
              <%= f.label :selected, label, value: val, for: "#{val}_radio", class: 'absolute border-neutral-focus border rounded-xl left-0 right-0 top-0 bottom-0 flex items-center justify-center group-hover:bg-neutral group-hover:text-white' %>
            </li>
          <% end %>
        </ul>
      </toggle-visible>
      <disable-hidden id="disk" class="block my-4 <%= 'hidden' if value['service'] != 'disk' %>">
        <%= render 'disk_form', f: %>
      </disable-hidden>
      <disable-hidden id="aws_s3" class="block my-4 space-y-4 <%= 'hidden' if value['service'] != 'aws_s3' %>">
        <%= render 'aws_form', f:, configs:, value: %>
      </disable-hidden>
      <disable-hidden id="google" class="block mt-4 space-y-4 mb-6 <%= 'hidden' if value['service'] != 'google' %>">
        <%= render 'google_cloud_form', f:, configs:, value: %>
      </disable-hidden>
      <disable-hidden id="azure" class="block mt-4 space-y-4 mb-6 <%= 'hidden' if value['service'] != 'azure' %>">
        <%= render 'azure_form', f:, configs:, value: %>
      </disable-hidden>
      <div class="form-control">
        <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button' %>
      </div>
    <% end %>
  </div>
  <div class="w-0 md:w-52"></div>
</div>
